<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>打飞机</title>
	<style>
		*{paddig:0;margin:0;}
		#did{
			position:relative;
			width:500px;
			height:500px;
			background-color:#ccc;
			overflow:hidden;
		}
		/*fj*/
		#fj{
			position:absolute;
			bottom:30px;
			left:210px;
		}
		#zd{
			position:absolute;
			top:0px;
			left:0px;
			display:none;
		}
	</style>
</head>
<body>
	<h1>打飞机</h1>
	<hr>
	<div id="did" >
		<!-- <div id="move" > -->
			<img src="./images/eshot.png" id="zd">
			<img src="./images/z5.png" id="fj" >
		<!-- </div> -->
	</div>
</body>
	<script>
		did = document.getElementById("did");
		fj = document.getElementById("fj");
		zd = document.getElementById("zd");
		move = document.getElementById("move");
		mytime=null;
		document.onkeydown=function(e){
			ee = e||window.event;

			//鼠标的位置
			x = ee.pageX;
			y = ee.pageY;
			code = ee.keyCode;
			// alert(code);
			switch(code){
				case 37:
					fj.style.left = fj.offsetLeft-5+"px";
					break;
				case 38:
					fj.style.top = fj.offsetTop-5+"px";
					break;
				case 39:
					fj.style.left = fj.offsetLeft+5+"px";
					break;
				case 40:
					fj.style.top = fj.offsetTop+5+"px";
					break;
				case 32:
					if(mytime==null){
						zd.style.top = fj.offsetTop+"px";
						zd.style.left = fj.offsetLeft+18+"px";
						zd.style.display="block";
						mytime = setInterval(function(){
							zd.style.top = zd.offsetTop-30+"px";
							if(zd.offsetTop<-20){
								clearInterval(mytime);
								mytime=null;
							}
						},50);
					}
					break;
			}
		}

	</script>
</html>